<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-yellow sidebar-mini">
<!--添加-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-add">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加</h4>
      </div>
      <div class="modal-body">
        <form id="addForm" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="badaNam" class="col-sm-2 control-label no-padding-right">计划名称</label>
            <div class="col-sm-10">
              <input id="badaNam" name="badaNam" type="text" maxlength="255" style="width: 200px;"  class="form-control" placeholder="请输入计划名称"/>
            </div>
          </div>
          <div class="form-group">
            <label for="badaTyp2" class="col-sm-2 control-label no-padding-right">计划类别</label>
            <div class="col-sm-10">
              <select id="badaTyp2" name="badaTyp2" class="form-control" style="width: 200px;">
                <option value="">请选择</option>
                <option th:each="item:${planBadaTyp2List}" th:value="${item}" th:text="${item}"></option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" id="btn_confirm">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
<section class="content-header">
  <h1>总调计划信息配置</h1>
</section>
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <div class="box-header">

        </div>
        <div id="toolbar" class="row">
          <button id="btn_add" class="btn btn-success">添加</button>
        </div>
        <div class="box-body">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
  </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
  let table, tempTable, tempData = new Array(), currentProject;
  $(function () {
    /**
     * 加载列表
     */
    loadTable();
    /**
     * 添加类别
     */
    $("#btn_add").on('click', function () {
      js.modal.open("modal-add");
    });
    /**
     * 模态框隐藏事件， 重置表单，重置验证
     */
    js.modal.hideEvent("modal-add", function () {
      js.validate.reset("addForm");
      js.reset("addForm");
    });
    /**
     * 验证
     */
    js.validate.init("addForm", {
      fields: {
        badaNam: {validators: {notEmpty: {message: '尊敬的用户，请输入计划名称！'}}},
        badaTyp2: {validators: {notEmpty: {message: '尊敬的用户，请选择计划类别！'}}}
      }
    });
    /**
     * 保存
     */
    $("#btn_confirm").on('click',function (){
      js.validSubmit({
        formId: "addForm",
        url: ctx + "task/base/addPla",
        data: new FormData($("#addForm")[0]),
        success: function (result) {
          if (result.type === web_status.SUCCESS) {
            js.modal.success(result.msg);
            js.modal.hide("modal-add");
          } else {
            js.modal.warning(result.msg);
          }
          js.table.refresh(table);
        }
      });
    });
  });
  /**
   * 删除
   */
  function remove(badaId){
    js.confirmPost({
      content: "尊敬的用户，您确认要删除此总调计划吗？",
      url: ctx + "task/base/removePla",
      data: {
        badaId:badaId
      },
      success: function (result) {
        if (result.type === web_status.SUCCESS) {
          js.modal.success(result.msg);
        } else {
          js.modal.warning(result.msg);
        }
        js.table.refresh(table);
      }
    });
  }

  /**
   * 加载列表
   */
  function loadTable() {
    table = js.table.init({
      url: ctx + "task/base/planList",
      showColumns: true,
      showExport: true,
      columns: [
        {
          title: '序号', width: '60',
          formatter: function (value, row, index, field) {
            var pageSize = table.bootstrapTable('getOptions').pageSize;
            var pageNumber = table.bootstrapTable('getOptions').pageNumber;
            return pageSize * (pageNumber - 1) + index + 1;
          }
        },
        {
          title: '计划名称', field: 'badaNam',
          formatter: function (value, row, index) {
            if (value != null) {
              return value;
            } else {
              return '--';
            }

          }
        },
        {
          title: '计划类别', field: 'badaTyp2',
          formatter: function (value, row, index) {
            if (value != null) {
              return value;
            } else {
              return '--';
            }

          }
        },
        {
          title: '操作', width: '180',
          formatter: function (value, row, index) {
            let elements = new Array();
            elements.push('<button class="btn btn-danger btn-xs" onclick="remove(' + row.badaId + ')">删除</button>');
            return elements.join('');
          }
        }
      ]
    });
  }
</script>
</body>
</html>